<template>
	<view class="login-container">
		<!-- 提示登录的图标 -->
		<uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
		<p class="txt1">您好,张三鱼~</p>
		<p class="txt2">为了您的账户安全，请绑定手机号</p>
		<!-- 登录按钮 -->
		<button class="btn-login" @click="getUserInfo">微信账号授权登录</button>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'

	export default {
		name: "my-login",
		data() {
			return {

			};
		},
		methods: {
			...mapMutations('users', ['updateUserInfo', 'updateTokenInfo']),
			async getUserInfo() {
				console.log(this)
				// this.updateTokenInfo({})
				uni.getUserProfile({
					desc: '用于完善会员资料',
					success: (res) => {
						console.log(res)
						console.log('头像', res.userInfo.avatarUrl)
						console.log('昵称', res.userInfo.nickName)
						var obj = {
							nickName: res.userInfo.nickName,
							avatarUrl: res.userInfo.avatarUrl
						}
						console.log('obj', obj)
						this.updateUserInfo(obj)
					}
				})
				const loginRes = await uni.login()
				console.log('9', loginRes)
				if (loginRes[0]) {
					console.log('登录失败')
					return
				}
				var obj1 = {
					token: loginRes[1].code
				}
				this.updateTokenInfo(obj1)
			},
		}
	}
</script>

<style lang="scss">
	.login-container {
		text-align: center;
		margin-top: 50px;

		.txt2 {
			margin-top: 20px;
			font-size: 12px;
		}

		.btn-login {
			background-color: rgb(67, 188, 254);
			width: 95%;
			margin-top: 40px;
		}
	}
</style>